<!-- 基础设置（选项设置） -->
<template>
    <nly-content-wrapper class="a-base-container bbasx">
        <div class="wh100 resize-table-container w800" style="padding:10px;">
            <div style="border:1px solid rgba(177, 177, 177, 0.6);height:100%;">
                <a-tabs default-active-key="1" @change="callback" style="height:100%;">
                    <a-tab-pane key="1" tab="公共" class="tab-pane-wrapper">
                        <keep-alive>
                            <common ref="common" @description="hover"></common>
                        </keep-alive>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="库存">
                        <inventory ref="inventory" @description="hover" @refresh="callback"></inventory>
                    </a-tab-pane>
                    <a-tab-pane key="3" tab="财务">
                        <financial ref="financial" @description="hover"></financial>
                    </a-tab-pane>
                    <a-tab-pane key="4" tab="往来/出纳">
                        <contacts ref="contacts" @description="hover"></contacts>
                    </a-tab-pane>
                    <a-tab-pane key="5" tab="销售">
                        <sales ref="sales" @description="hover"></sales>
                    </a-tab-pane>
                    <a-tab-pane key="6" tab="采购">
                        <purchase ref="purchase" @description="hover"></purchase>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
        <previewSubject ref="previewSubject"></previewSubject>
        <tipsmodal :title="'相关描述'" :content="descriptionText"></tipsmodal>
    </nly-content-wrapper>
</template>
<script>
import previewSubject from "./model/previewSubject";
import { tipsmodal } from "@/components/PopUpLayer"; // 使用相关描述
import common from "./optionSet/common";
import inventory from "./optionSet/inventory";
import financial from "./optionSet/financial";
import contacts from "./optionSet/contacts";
import sales from "./optionSet/sales";
import purchase from "./optionSet/purchase";
export default {
    components: {
        previewSubject,
        tipsmodal,
        common,
        inventory,
        financial,
        contacts,
        sales,
        purchase,
    },
    data() {
        return {
            descriptionText: "", //描述文本
            key: 1, // tabs key
        };
    },
    mounted() {
        this.callback("1");
    },
    methods: {
        //hover 展示相关描述
        hover(description) {
            let data = {};
            if (Array.isArray(description)) {
                data = description[0];
            } else {
                data = description;
            }
            this.descriptionText = JSON.parse(
                JSON.stringify(data, ["name", "remark"])
            );
        },
        //tab切换
        callback(key) {
            console.log("这是选择的key:" + typeof key);
            //设置分类（UA:公共，ST:库存，FI:财务，ARAP:往来/出纳，SA:销售，PU:采购）
            switch (key) {
                case "1":
                    console.log("这是选择的key:" + key);
                    this.$refs.common.getData("UA");
                    break;
                case "2":
                    this.$nextTick(() => {
                        this.$refs.inventory.getData("ST");
                    });
                    break;
                case "3":
                    this.$nextTick(() => {
                        this.$refs.financial.getData("FI");
                    });
                    break;
                case "4":
                    this.$nextTick(() => {
                        this.$refs.contacts.getData("ARAP");
                    });
                    break;
                case "5":
                    this.$nextTick(() => {
                        this.$refs.sales.getData("SA");
                    });
                    break;
                case "6":
                    this.$nextTick(() => {
                        this.$refs.purchase.getData("PU");
                    });
                    break;
            }
        },
        //过滤
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text
                    .toLowerCase()
                    .indexOf(input.toLowerCase()) >= 0
            );
        },
    },
};
</script>
<style lang="less" scoped>
.resize-table-container {
    width: 800px;
}
</style>
<style lang="less">
.tab-pane-wrapper {
    height: 100%;
}
.bbasx {
    .ant-tabs-content {
        height: 100%;
        padding-bottom: 60px;
    }
}
.btn-save {
    width: 100%;
    height: 50px;
    line-height: 50px;
    box-shadow: 0 0 10px #ddd;
    text-align: center;
    .btn {
        margin-right: 10px;
    }
}
</style>
 
